<template>
  <div class="treeContent" style="height: 80px">
    <el-form-item :style="show == 0 ? 'height:20px' : 'height:80px'">
      <el-link :underline="false" v-if="show === 0" type="primary">
        <!-- <i class="el-icon-arrow-down"></i> -->
        <div class="contentStyle" @click="isShow()">
          content<span>Array</span>
        </div>
      </el-link>
      <el-form v-else>
        <div style="display: flex; height: 80px">
          <i
            class="el-icon-arrow-up"
            @click="isShow()"
            style="margin-left: 30px"
          ></i>
          <div>
            <div style="flexTree">
              <el-form-item
                v-for="(v, i) in content"
                :key="i"
                style="margin-left: 10px; margin-bottom: -1px"
              >
                <el-link
                  v-if="editingRow !== i"
                  :underline="false"
                  type="primary"
                  @dblclick.native="editingRow = i"
                >
                  <span @click="getData()">{{ [i] }}:{{ v }}</span></el-link
                >
                <el-input
                  @blur.native.capture="editingRow = -1"
                  v-model="content[i]"
                  v-show="editingRow === i"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "treelist",
  data() {
    return {
      flag: 0,
      show: 0,
      ArrLabs: [],
      datakeys: [],
      editingRow: -1,
    };
  },
  props: ["content"],
  created() {},
  methods: {
    //labs隐藏显示
    isHidden() {
      this.flag;
      if (this.flag === 0) {
        this.flag = 1;
      } else {
        this.flag = 0;
        this.show = 0;
      }
    },
    //content隐藏显示
    isShow() {
      this.show;
      if (this.show === 0) {
        this.show = 1;
      } else {
        this.show = 0;
      }
    },
    clickRow(idx) {
      this.$set(this.keyflag, idx, !this.keyflag[idx] && true);
    },
    //getData
    getData() {
      console.log("contentData", this.content);
    },
  },
};
</script>

<style lang="scss" scoped>
.treeContent {
  overflow: auto;
}
.el-link {
  &.tree-lest {
    overflow: auto;
  }
}
::-webkit-scrollbar {
  width: 50px;
}
.contentStyle {
  margin-left: 24px;
  height: 23px;
  font-size: 14px;
  font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
  line-height: 23px;
  & span {
    margin-left: 14px;
    font-size: 14px;
    font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
    font-weight: bold;
    color: #4353e4;
  }
}
.flexTree {
  display: flex;
  flex-direction: column;
  height: 80px;
}
.wordStyle {
  height: 23px;
  font-size: 14px;
  font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
  line-height: 23px;
}
</style>
